<template>
  <div id="app">
    <!-- 头部+侧边栏star -->
    <div class="Hearder">
      <Header :login="isLogin"></Header>
    </div>
    <div class="NavLeft" :class="{ 'active2': isActive2 }">
      <main-tab-bar></main-tab-bar>
    </div>
    <!-- 头部+侧边栏end -->

    <!-- 内容区域star -->
    <div class="Content" :class="{ 'active': isActive, 'active2': isActive2 }">
      <router-view/>
    </div>
    <!-- 内容区域end -->


  </div>
</template>

<script>
  import mainTabBar from "@c/common/tabbar/mainTabBar";
  import Header from "@c/common/tabbar/header";

  export default {
    name: "App",
    components: {
      mainTabBar,Header
    },
    data(){
      return {
        show : false,
        isLogin : this.$store.getters.isLogin,
        isActive: false,
        isActive2: false
      }
    },
    mounted() {
      this.isActive = this.$route.meta.addClass
      this.isActive2 = this.$route.meta.addClass2
    },
    watch: {
      '$route'(to, from) {
        this.isActive = to.meta.addClass
        this.isActive2 = to.meta.addClass2
      }
    }
  }
</script>

<style>
  @import "assets/css/base.css";
</style>
